import React, { PureComponent } from 'react'
import { message, Steps } from 'antd'
import { history } from '@umijs/max'
import { BreadcrumbBar } from '@/components'
import { Configuration, DataSource, FieldMap } from './page-components'
import styles from './index.less'
import { offlineDetail } from './api'
import { getHashParameterByName } from '@/utils/helper'

const { Step } = Steps

class OfflineCreate extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      currentStep: 0,
      data: {},
      oldData: {},
      id: null,
      menus: [{ name: '离线同步' }, { name: '新建任务' }],
    }
  }

  componentDidMount() {
    this.setState({
      id: getHashParameterByName('id') ? getHashParameterByName('id') : null,
    }, () => {
      const { id } = this.state
      if (!id) return
      this.setState({
        menus: [{ name: '离线同步' }, { name: '编辑任务' }],
      })
      this.offlineDetail(id)
    })
  }

  currentStepChange = (currentStep, value) => {
    const { data } = this.state
    this.setState({
      currentStep,
      data: { ...data, ...value },
    })
  }

  returnStep = (currentStep) => {
    this.setState({
      currentStep,
    })
  }

  offlineDetail = (id) => {
    offlineDetail({ id }).then((res) => {
      if (res.status === 200) {
        message.success(res.msg)
        this.setState({
          data: res.data || {},
          oldData: res.data || {},
        })
      } else {
        message.error(res.msg)
      }
    })
  }

  render() {
    const {
      currentStep, data, id, menus, oldData,
    } = this.state
    const content = [
      {
        title: '数据源配置',
        content: <DataSource style={{ display: currentStep === 0 ? 'block' : 'none' }} currentStep={currentStep} data={data} currentStepChange={this.currentStepChange} />,
      },
      {
        title: '字段映射',
        content: <FieldMap style={{ display: currentStep === 1 ? 'block' : 'none' }} currentStep={currentStep} returnStep={this.returnStep} oldData={oldData} data={data} currentStepChange={this.currentStepChange} />,
      },
      {
        title: '同步配置',
        content: <Configuration style={{ display: currentStep === 2 ? 'block' : 'none' }} currentStep={currentStep} returnStep={this.returnStep} data={data} currentStepChange={this.currentStepChange} />,
      },
    ]
    return (
      <div className={styles.offline_create}>
        <BreadcrumbBar menu={menus} />
        <div className={styles.back_bar}>
          <i className="iconfont icon-zuo" onClick={() => { history.push('/dataIntegrate/offline/manager') }} />
          <span onClick={() => { history.push('/dataIntegrate/offline/manager') }}>{id ? '编辑任务' : '新建任务'}</span>
        </div>
        <div className={styles.container}>
          <Steps size="small" className={styles.step} current={currentStep}>
            {content.map((item, key) => <Step key={key} title={item.title} />)}
          </Steps>
          {content.map((item) => item.content)}
        </div>
      </div>
    )
  }
}

export default OfflineCreate
